<template>
	<div>
		<div v-if="!isMobile">
			<div class="box">
				<div class="box-left">
					<video src="@/assets/video/1.mp4" autoplay="autoplay" loop></video>
				</div>
				<div class="box-right">
					<div class="logo">
						<img src="@/assets/images/5.png" width="300px" alt="" />
					</div>
					<div class="bg-phone">
						<div class="content">
							<router-view></router-view>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="test" :class="{ show: $store.state.userPageShow }" v-else>
			<router-view></router-view>
		</div>
		<div class="maskLayer"></div>
	</div>
</template>

<script>
export default {
	name: 'GlobalIndex',
	computed: {
		isMobile() {
			return this.$store.state.isMobile;
		},
	},
	created() {
		this.$store.dispatch('isMobile');
	},
};
</script>

<style scoped>
body,
html {
	margin: 0;
	padding: 0;
}

.box {
	width: 100%;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
}

.box .box-left {
	flex: 1;
	width: 100%;
	height: 100vh;
	background-color: black;
}

.box .box-left video {
	width: 100%;
	height: 100%;
}

.box .box-right {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width: 100%;
	height: 100%;
	background-color: #f7e670;
}

.box .box-right .bg-phone {
	width: 400px;
	height: 850px;
	background: url('@/assets/images/phone.jpg');
	background-size: cover; /* 让背景图基于容器大小伸缩 */
	position: relative;
	display: flex;
	justify-content: center;
	border-radius: 60px 50px 30px 40px;
}

.box .box-right .content {
	width: 350px;
	height: 70%;
	overflow: scroll;
	position: absolute;
	top: 135px;
	z-index: 999;
	background-color: #fff;
}

.test {
	width: 100%;
	height: 100%;
	background-color: #fff;
	transition: all 0.7s;
}

.show {
	overflow: hidden;
	margin-left: 50%;
	transition: all 0.36s;
}

/* .maskLayer {
	width: 50%;
	height: 100%;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 2;
} */
</style>
